import React, { Component } from "react";
import UserInfo2 from "./components/UserInfo2";
import ReadOnly from "./components/ReadOnly";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [
        {
          title: "教师信息",
          name: "翟吉喆",
          isMarried: true,
          age: 39,
          gender: 1,
          school: {
            name: "蜗牛学苑",
          },
          email: "zhaijizhe@hotmail.com",
          hobby: ["爱打游戏", "爱读书"],
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8075fa62-cf88-420a-88f7-9a4a4d714bb0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693116248&t=8349c2f4a2a398ce7f3b42fde117f372",
        },
        {
          title: "教师信息",
          name: "李刚",
          isMarried: true,
          age: 39,
          gender: 1,
          school: {
            name: "蜗牛学苑",
          },
          email: "ligang@hotmail.com",
          hobby: ["爱打游戏", "爱读书"],
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F34b72822-b16e-42c6-8ff4-c67dcbd65b62%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693116433&t=682677f256feb94a07bb734e6850bf84",
        },

        {
          title: "教师信息",
          name: "张涛",
          isMarried: true,
          age: 39,
          gender: 1,
          school: {
            name: "蜗牛学苑",
          },
          email: "zhangtao@hotmail.com",
          hobby: ["爱打游戏", "爱读书"],
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fff94d9ca-3fc7-43e1-82a5-31f52a80702d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693116248&t=578971ea2d804b78cb3f0b9f5f54e1b3",
        },
      ],
      message:'你好react!',
      telephoys:['react基础知识','redux','saga','dva','umi']
    };
  }
  render() {
    const { users } = this.state;
    return (
      // <div style={{ display: "flex" }}>
      //   {users.map((item, index) => (
      //     <UserInfo2 {...item}></UserInfo2>
      //   ))}
      // </div>
      <div>
         <ReadOnly message={this.state.message} telephoys={this.state.telephoys}></ReadOnly>
      </div>
    );
  }
}
